import React, { Fragment } from 'react'
import { Input, Button, Layout, List } from 'antd'
import 'antd/dist/antd.css'
const { Header, Content, Footer, Sider } = Layout

// export default class TodoListUI extends Component {
//   render() {
//     return (
//       <Fragment>
//         <Layout>
//           <Sider>Sider</Sider>
//           <Layout>
//             <Header>Header</Header>
//             <Content>
//               <div style={{ margin: '10px', width: '300px' }}>
//                 <List
//                   bordered
//                   dataSource={this.props.list}
//                   renderItem={(item, index) => <List.Item onClick={() => this.props.deleteItem(index)}>{item}</List.Item>}
//                 />
//               </div>
//             </Content>
//             <Footer>Footer</Footer>
//           </Layout>
//         </Layout>
//         <Input
//           placeholder={this.props.inputValue}
//           style={{ width: '250px', marginRight: '10px' }}
//           onChange={this.props.changeInputValue}
//           value={this.props.inputValue}
//         />
//         <Button type="primary" onClick={this.props.clickBtn}>
//           增加
//         </Button>
//       </Fragment>
//     )
//   }
// }

export default props => {
  return (
    <Fragment>
      <Layout>
        <Sider>Sider</Sider>
        <Layout>
          <Header>Header</Header>
          <Content>
            <div style={{ margin: '10px', width: '300px' }}>
              <List
                bordered
                dataSource={props.list}
                renderItem={(item, index) => <List.Item onClick={() => props.deleteItem(index)}>{item}</List.Item>}
              />
            </div>
          </Content>
          <Footer>Footer</Footer>
        </Layout>
      </Layout>
      <Input
        placeholder={props.inputValue}
        style={{ width: '250px', marginRight: '10px' }}
        onChange={props.changeInputValue}
        value={props.inputValue}
      />
      <Button type="primary" onClick={props.clickBtn}>
        增加
      </Button>
    </Fragment>
  )
}
